<template>
    <div ref="echartDom"></div>
  </template>
  
  <script setup>
  import {ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineExpose} from 'vue'
  import {pxToRem} from "@/utils/index";
  
  const props = defineProps({
    scatterData: {
      type: Array,
      default: () => []
    }
  });
  
  const echartDom = ref(null);
  const myChart = shallowRef(null);
  const echarts = inject('echarts');
  
  const initEchart = () => {
    if (echartDom.value) {
      myChart.value = echarts.init(echartDom.value);
      let option = {
        grid: {
          left: 0,
          right: '15%',
          bottom: 0,
          top: '24%',
          containLabel: true
        },
        legend: {
          x: 'center',
          top: '10%',
          itemWidth: pxToRem(10),
          itemHeight: pxToRem(10),
          textStyle: {
            color: 'white',
            fontSize: pxToRem(12)
          },
          itemGap: pxToRem(30),
          icon: 'rect',
          data: [
            {
              name: '供给',
              itemStyle: {
                color: '#0E81FF'
              }
            },
            {
              name: '销售',
              itemStyle: {
                color: '#5ABE52'
              }
            },
          ]
        },
        xAxis: {
          name: '均价',
          axisLabel: {
            fontSize: pxToRem(9),
            color: 'white',
          },
          nameTextStyle: {
            color: "white",
            fontSize: pxToRem(12),
          },
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          name: '面积',
          nameTextStyle: {
            color: "white",
            fontSize: pxToRem(12),
          },
          textStyle: {
            fontSize: pxToRem(9)
          },
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            fontSize: pxToRem(9),
            color: 'white',
            fontWeight: 'lighter'
          }
        },
        series: [
          {
            name: '供给',
            type: 'scatter',
            symbolSize: pxToRem(5),
            data: props?.scatterData?.seriesData?.[0]
          },
          {
            name: '销售',
            type: 'scatter',
            symbolSize: pxToRem(5),
            data: props?.scatterData?.seriesData?.[1]
          },
        ]
      }
      option && myChart.value.setOption(option, true);
    }
  }
  
  const updateChart = () => {
    if (myChart.value) {
      myChart.value.dispose(); // 销毁旧图表实例
    }
    initEchart();
  };
  
  defineExpose({
    updateChart
  })
  
  onMounted(() => {
    initEchart();
    window.addEventListener("resize", updateChart);
  })
  
  onUnmounted(() => {
    window.removeEventListener("resize", updateChart);
  })
  </script>
  
  <style scoped lang="less">
  .h180 {
    height: 200px;
  }
  </style>